@use "design-system";

@import 'components/confirmation-footer/confirmation-footer';
@import 'components/confirmation-network-switch/index';

.confirmation-page {
  $height-screen-sm-min: 720px;
  $width-screen-sm-min: 85vw;
  $width-screen-md-min: 80vw;
  $width-screen-lg-min: 62vw;

  // prevent overflow-x
  max-width: 100%;
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
  width: 100%;
  min-height: 0;
  position: relative;
  background: var(--color-background-default);
  display: grid;
  flex-direction: column;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'navigation'
    'content'
    'footer';

  /**
   * @todo
   * Support responsive margin top and bottom for snaps
   * {@see {@link https://github.com/MetaMask/metamask-extension/issues/31671}}
   */
  // transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
  // @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
  //   margin-top: 32px;
  //   margin-bottom: 32px;
  // }


  @include design-system.screen-sm-min {
    width: $width-screen-sm-min;
  }

  @include design-system.screen-md-min {
    width: $width-screen-md-min;
  }

  @include design-system.screen-lg-min {
    width: $width-screen-lg-min;
  }

  a {
    color: var(--color-primary-default);
  }

  &__content {
    display: flex;
    flex-direction: column;
    grid-area: content;
    min-width: 0;

    & > :last-child {
      margin-top: auto;
    }
  }

  &__navigation {
    @include design-system.H7;

    grid-area: navigation;
    background-color: var(--color-background-alternative);
    border-bottom: 1px solid var(--color-border-muted);
    padding: 6px 16px 5px 16px;
    color: var(--color-text-alternative);
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) minmax(0, auto);
    align-items: center;
  }

  &__navigation-button {
    background-color: var(--color-background-default);
    border-radius: 100px;
    color: var(--color-text-alternative);
    font-size: design-system.$font-size-h6;
    height: 20px;
    width: 20px;
    padding: 0;

    &:disabled {
      cursor: not-allowed;
      background-color: var(--color-background-alternative);
      color: var(--color-text-muted);
    }
  }

  &__navigation &__navigation-button:last-child {
    margin-left: 8px;
  }

  .chip {
    max-width: 100%;
    height: 40px;

    &__label {
      word-break: break-all;
    }
  }

  .actionable-message {
    margin-top: 0;
  }
}
